<template>
  <!--产品映射参数-->
  <Card class="cpyscs page-fill" style="height:900px">
    <div class="form-box">
      <v-form inline>
        <v-form-item label="版本" style="margin-bottom:0;">
          <v-select placeholder="版本" v-model="productVersion" :select-list="productVersionList" @item-click="productVersionCheck"></v-select>
        </v-form-item>
        <v-form-item label="产品大类" style="margin-bottom:0;">
          <v-select placeholder="产品大类" v-model="productType" :select-list="productTypeList" @item-click="productTypeCheck"></v-select>
        </v-form-item>
        <v-form-item label="产品细类" style="margin-bottom:0;">
          <v-select placeholder="产品细类" v-model="productCode" :select-list="productCodeList"></v-select>
        </v-form-item>
        <v-form-item label="期限" style="margin-bottom:0;">
          <v-select placeholder="期限" v-model="tenor" :select-list="tenorList" disabled></v-select>
        </v-form-item>
        <v-form-item label="评级" style="margin-bottom:0;">
          <v-select placeholder="评级" v-model="grate" :select-list="grateList"></v-select>
        </v-form-item>
        <!-- <v-form-item label="" style="margin-bottom:0;">
          <v-select placeholder="是否人工定价" v-model="currentSelect" :select-list="optionsData" @item-click=""></v-select>
        </v-form-item> -->
        <v-button size="small" type="primary" @on-click="query" style="margin-left:30px;">查询</v-button>
        <v-button size="small" type="green" @on-click="handleRouteGo('cpyscsadd')" style="margin-left:10px;">新增</v-button>
      </v-form>
    </div>
    <div class="table-data" style="">
      <v-table :columns="columns1" :data="data1"></v-table>
    </div>
    <div class="pagi-box">
      <v-pagination :total="total" :current-page="currentPage" :page-size="pageSize" @on-page-change="handlePageChange2">
      </v-pagination>
    </div>
  </Card>
</template>

<script>
import api from '@/api'
export default {
  data () {
    return {
      gdh: '',
      currentSelect: '',
      productVersion: '',
      productVersionList: [],
      productType: '',
      productTypeList: [],
      productCode: '',
      productCodeList: [],
      tenor: '',
      tenorList: [],
      grate: '',
      grateList: [],
      firstChannelList: [
        {
          value: 1,
          label: '已'
        },
        {
          value: 2,
          label: '多发'
        }
      ],
      firstChannel: '11',
      secondChannelList: [
        {
          value: 1,
          label: '已'
        },
        {
          value: 2,
          label: '多发'
        }
      ],
      secondChannel: '',
      thirdChannelList: [
        {
          value: 1,
          label: '已'
        },
        {
          value: 2,
          label: '多发'
        }
      ],
      thirdChannel: '',
      manList: [
        {
          value: '1',
          label: '否'
        },
        {
          value: '0',
          label: '是'
        }
      ],
      man: '',
      displayMonthlyRate: '',
      compositeMonthlyRate: '',
      columns1: [
        {
          title: '版本',
          key: 'productVersion'
        },
        {
          title: '渠道',
          key: 'channelName'
        },
        {
          title: '产品大类',
          key: 'productTypeName'
        },
        {
          title: '产品细类',
          key: 'productName'
        },
        {
          title: '期限',
          key: 'tenor'
        },
        {
          title: '评级',
          key: 'grate'
        },
        {
          title: '一级渠道',
          render: function (h, param, index) {
            const vm = this
            return h('div', {}, [
              param.row.isValid === '1' && h(
                'v-form-item',
                {

                  style: {
                    verticalAlign: 'middle',
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-select',
                  {
                    props: {
                      placeholder: '一级渠道',
                      selectList: vm.firstChannelList,
                      value: param.row.firstOrgCode
                    },
                    style: {
                      display: 'block'
                    },
                    on: {
                      'input' (value) {
                        // vm.secondChannel = value
                      },
                      'item-click' (index) {
                        let item = vm.firstChannelList[index]
                        vm.$set(vm.data1[param.index], 'firstOrgCode', item.value)
                        vm.$set(vm.data1[param.index], 'firstOrgName', item.label)
                      }
                    }
                  }
                )]
              ),
              param.row.isValid === '0' && h(
                'v-form-item',
                {

                  style: {
                    verticalAlign: 'middle',
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-input',
                  {
                    props: {
                      placeholder: '一级渠道',
                      value: param.row.firstOrgName,
                      disabled: true
                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    }
                  }
                )]
              )

            ])
          }.bind(this)
        },
        {
          title: '二级渠道',
          render: function (h, param, index) {
            const vm = this
            return h('div', {}, [
              param.row.isValid === '1' && h(
                'v-form-item',
                {
                  props: {
                  },
                  style: {
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-select',
                  {
                    props: {
                      placeholder: '二级渠道1',
                      selectList: vm.secondChannelList,
                      value: param.row.secondOrgCode
                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    },
                    on: {
                      'input' (value) {
                        // vm.secondChannel = value
                      },
                      'item-click' (index) {
                        let item = vm.secondChannelList[index]
                        vm.$set(vm.data1[param.index], 'secondOrgCode', item.value)
                        vm.$set(vm.data1[param.index], 'secondOrgName', item.label)
                      }
                    }
                  }
                )]
              ),
              param.row.isValid === '0' && h(
                'v-form-item',
                {

                  style: {
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-input',
                  {
                    props: {
                      placeholder: '二级渠道',
                      disabled: true,
                      value: param.row.secondOrgName
                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    }
                  }
                )]
              )

            ])
          }.bind(this)
        },
        {
          title: '团队',
          render: function (h, param, index) {
            const vm = this
            return h('div', {}, [
              param.row.isValid === '1' && h(
                'v-form-item',
                {

                  style: {
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-select',
                  {
                    props: {
                      placeholder: '团队',
                      selectList: vm.thirdChannelList,
                      value: param.row.thirdOrgCode
                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    },
                    on: {
                      'input' (value) {
                        // vm.secondChannel = value
                      },
                      'item-click' (index) {
                        let item = vm.thirdChannelList[index]
                        vm.$set(vm.data1[param.index], 'thirdOrgCode', item.value)
                        vm.$set(vm.data1[param.index], 'thirdOrgName', item.label)
                      }
                    }
                  }
                )]
              ),
              param.row.isValid === '0' && h(
                'v-form-item',
                {

                  style: {
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-input',
                  {
                    props: {
                      placeholder: '团队',
                      disabled: true,
                      value: param.row.thirdOrgName
                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    }
                  }
                )]
              )

            ])
          }.bind(this)
        },
        {
          title: '展示月费率',
          render: function (h, param, index) {
            const vm = this
            return h('div', {}, [
              param.row.isValid === '1' && h(
                'v-form-item',
                {

                  style: {
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-input',
                  {
                    props: {
                      placeholder: '展示月费率'

                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    },
                    on: {
                      'input' (value) {
                        vm.$set(vm.data1[param.index], 'displayMonthlyRate', value)
                        // vm.secondChannel = value
                      }
                    }
                  }
                )]
              ),
              param.row.isValid === '0' && h(
                'v-form-item',
                {

                  style: {
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-input',
                  {
                    props: {
                      placeholder: '展示月费率',
                      disabled: true,
                      value: param.row.displayMonthlyRate

                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    }

                  }
                )]
              )
            ])
          }.bind(this)
        },
        {
          title: '综合月费率',
          render: function (h, param, index) {
            const vm = this
            return h('div', {}, [
              param.row.isValid === '1' && h(
                'v-form-item',
                {

                  style: {
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-input',
                  {
                    props: {
                      placeholder: '综合月费率'

                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    },
                    on: {
                      'input' (value) {
                        vm.$set(vm.data1[param.index], 'compositeMonthlyRate', value)

                        // vm.secondChannel = value
                      }
                    }
                  }
                )]
              ),
              param.row.isValid === '0' && h(
                'v-form-item',
                {

                  style: {
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-input',
                  {
                    props: {
                      placeholder: '综合月费率',
                      disabled: true,
                      value: param.row.compositeMonthlyRate

                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    }
                  }
                )]
              )
            ])
          }.bind(this)
        },
        {
          title: '是否人工定价',
          render: function (h, param, index) {
            const vm = this
            return h('div', {}, [
              param.row.isValid === '1' && h(
                'v-form-item',
                {

                  style: {
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-select',
                  {
                    props: {
                      placeholder: '是否人工定价',
                      selectList: vm.manList,
                      value: param.row.isManPrice
                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    },
                    on: {
                      'input' (value) {
                        // vm.secondChannel = value
                      },
                      'item-click' (index) {
                        let item = vm.manList[index]
                        vm.$set(vm.data1[param.index], 'isManPrice', item.value)
                      }
                    }
                  }
                )]
              ),
              param.row.isValid === '0' && h(
                'v-form-item',
                {

                  style: {
                    marginBottom: 0
                  },
                  on: {
                    'on-click' () {

                    }
                  }
                },
                [h(
                  'v-input',
                  {
                    props: {
                      placeholder: '是否人工定价',
                      disabled: true,
                      value: param.row.isManPrice
                    },
                    style: {
                      display: 'block',
                      marginBottom: 0
                    }
                  }
                )]
              )
            ])
          }.bind(this)
        },
        {
          title: '操作',
          render: function (h, param, index) {
            const vm = this
            return h('div', {}, [
              param.row.isValid === '0' && h(
                'v-button',
                {
                  props: {
                    type: 'text'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    'on-click' () {
                      api.modifyProductMapped({
                        id: param.row.id,
                        isValid: '1'
                      }).then(re => {
                        if (re.data.code === 'success') {
                          vm.query()
                        }
                      }).catch(er => { })
                    }
                  }
                },
                ' 编辑'
              ),
              param.row.isValid === '1' && h(
                'v-button',
                {
                  props: {
                    type: 'text'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    'on-click' () {
                      api.modifyProductMapped({
                        id: param.row.id,
                        firstOrgCode: param.row.firstOrgCode,
                        secondOrgCode: param.row.firstOrgCode,
                        thirdOrgCode: param.row.thirdOrgCode,
                        firstOrgName: param.row.firstOrgName,
                        secondOrgName: param.row.secondOrgName,
                        thirdOrgName: param.row.thirdOrgName,
                        isManPrice: param.row.isManPrice,
                        displayMonthlyRate: param.row.displayMonthlyRate,
                        compositeMonthlyRate: param.row.compositeMonthlyRate,
                        isValid: '0'
                      }).then(re => {
                        if (re.data.code === 'success') {
                          vm.query()
                        }
                      }).catch(er => { })
                    }
                  }
                },
                ' 保存'
              ),
              h(
                'v-button',
                {
                  props: {
                    type: 'text'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    'on-click' () {
                      if (!confirm('确认删除?')) {
                        return
                      }
                      api.modifyProductMapped({
                        id: param.row.id,
                        deleteFlag: 1
                      }).then(re => {
                        if (re.data.code === 'success') {
                          let data1 = JSON.parse(JSON.stringify(vm.data1))
                          data1.splice(index, 1)
                          vm.data1 = data1
                          vm.$alert({ title: '提示', content: re.data.data })
                        }
                      }).catch(er => { })
                    }
                  }
                },
                ' 删除'
              )
            ])
          }.bind(this)
        }
      ],
      data1: [
        {
          id: '1232323',
          khxm: 'hello'
        }
      ],
      total: 0,
      currentPage: 1,
      pageSize: 3
    }
  },
  created () {
    var vm = this
    // 产品大类查询
    vm.productTypeList.push({
      value: '',
      label: '请选择'
    })
    api.searchProduct({}).then(re => {
      var allData = re.data.data
      for (var i = 0; i < allData.length; i++) {
        vm.productTypeList.push({
          value: allData[i].productType,
          label: allData[i].productTypeName
        })
      }
    })

    // 产品版本查询
    vm.productVersionList.push({
      value: '',
      label: '请选择'
    })
    api
      .searchProductVersion({})
      .then(re => {
        var allData = re.data.data
        for (var i = 0; i < allData.length; i++) {
          vm.productVersionList.push({
            value: allData[i].productVersion,
            label: allData[i].productVersion
          })
        }
      })
      .catch(er => { })

    // 产品小类查询
    vm.productCodeList.push({
      value: '',
      label: '请选择'
    })
    api
      .searchByVersion({})
      .then(re => {
        var allData = re.data.data
        for (var i = 0; i < allData.length; i++) {
          vm.productCodeList.push({
            value: allData[i].productCode,
            label: allData[i].productName
          })
        }
      })
      .catch(er => { })

    this.query()
  },
  methods: {
    // 分页
    handlePageChange2 (index) {
      this.currentPage = index
      var vm = this
      var param = {
        productVersion: vm.productVersion,
        productType: vm.productType,
        productCode: vm.productCode,
        tenor: vm.tenor,
        grate: vm.grate,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      api
        .searchProductMapped(param)
        .then(re => {
          this.data1 = re.data.data.list
          this.total = re.data.data.total
          this.currentPage = re.data.data.pageNum
        })
        .catch(er => { })
    },
    handleRouteGo (pathName) {
      this.$router.push(pathName)
    },
    // 查询
    query () {
      var vm = this
      var param = {
        productVersion: vm.productVersion,
        productType: vm.productType,
        productCode: vm.productCode,
        tenor: vm.tenor,
        grate: vm.grate,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      api
        .searchProductMapped(param)
        .then(re => {
          this.data1 = re.data.data.list
          this.total = re.data.data.total
          this.currentPage = re.data.data.pageNum
        })
        .catch(er => { })
    },
    // 点击大类获取相应的版本和小类
    productTypeCheck () {
      var vm = this
      vm.productVersionList = []
      vm.productVersion = ''
      vm.productVersionList.push({
        value: '',
        label: '请选择'
      })
      api
        .searchVersion({ productType: vm.productType })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.productVersionList.push({
              value: allData[i].productVersion,
              label: allData[i].productVersion
            })
          }
        })
        .catch(er => { })
      // 获取产品小类
      vm.productCodeList = []
      vm.productCode = ''
      vm.productCodeList.push({
        value: '',
        label: '请选择'
      })
      api
        .searchByVersion({
          productType: vm.productType,
          productVersion: vm.productVersion
        })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.productCodeList.push({
              value: allData[i].productCode,
              label: allData[i].productName
            })
          }
        })
        .catch(er => { })
      // 根据产品大类获得期数
      var tmp = []
      api
        .searchChannelAndTerm({ productType: vm.productType })
        .then(re => {
          for (var i = 0; i < re.data.data.termList.length; i++) {
            tmp.push({
              value: re.data.data.termList[i].term + '',
              label: re.data.data.termList[i].term + '期'
            })
          }
          vm.tenorList = tmp
        })
        .catch(er => { })
    },
    productVersionCheck () {
      // 点击版本查询产品小类
      var vm = this
      vm.productCodeList = []
      vm.productCode = ''
      vm.productCodeList.push({
        value: '',
        label: '请选择'
      })
      api
        .searchByVersion({
          productType: vm.productType,
          productVersion: vm.productVersion
        })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.productCodeList.push({
              value: allData[i].productCode,
              label: allData[i].productName
            })
          }
        })
        .catch(er => { })
    }
  }
}
</script>

<style lang="less">
.cpyscs {
}
</style>
